<template>
	<view class="container">
		<view class="order-detail-header">
			<image :src="url+'/static/imgs/order-detail-bg.png'"></image>
			<view class="header-main col">
				<text>{{orderDetail.order_state_name}}</text>
				<text v-if="orderDetail.order_state==4">完成时间：{{orderDetail.finish_time}}</text>
			</view>
		</view>
		<view class="col goods-list">
			<view class="row title">订单商品</view>
			<view class="row goods-item" v-for="(item) in orderDetail.snap_items" v-bind:key="item">
				<image class="cover-image" :src="item.goods_info.image" mode="aspectFill"></image>
				<view class="col goods-content-main">
					<view class="goods-name">{{item.goods_info.goods_naming.title?'【'+item.goods_info.goods_naming.title+'】':''}}{{item.goods_info.name}}</view>
					<view class="subtitle text-ellipsis" v-if="item.goods_info.goods_naming.name">{{item.goods_info.goods_naming.name}}</view>
					<view class="row">
						<view class="price">¥{{item.goods_info.goods_price}}</view>
						<view class="row operate auto-left">x{{item.goods_num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="col total-view gray">
			<view class="row item">
				<view class="label">优惠券</view>
				<view class="auto-left">-￥{{orderDetail.coupon_price}}</view>
			</view>
			<view class="row item">
				<view class="label">现金红包</view>
				<view class="auto-left">-￥{{orderDetail.store_red_price}}</view>
			</view>
			<view class="row item">
				<view class="label">实付款</view>
				<view class="auto-left price">¥{{orderDetail.order_pay_price}}</view>
			</view>
		</view>
		<view class="col total-view gray">
			<view class="row item">
				<view class="label title">订单信息</view>
			</view>
			<view class="row item">
				<view class="label">订单编号：{{orderDetail.order_sn}}</view>
			</view>
			<view class="row item">
				<view class="label">下单时间：{{orderDetail.create_time}}</view>
			</view>
			<!-- <view class="qrcode-view col" v-if="orderDetail.order_state==3">
				<text>取餐二维码</text>
				<image :src="qrcodeBaseUrl"></image>
			</view> -->
		</view>

		<!-- <view style="height: 98rpx;background: #fff;"></view>
		<view class="row bottom">
			<view class="row confirm auto-left" @click.stop="changeMask">继续加菜</view>
		</view> -->

	</view>
</template>

<script>
	var app = getApp();
	import http from "../../../../common/js/request.js";
	import common from "../../../../common/js/function.js";
	export default {
		data() {
			return {
				orderDetail: {},
				url: app.globalData.baseImgUrl,
				qrcodeBaseUrl: app.globalData.qrcodeBaseUrl,
			}
		},
		onLoad(options) {
			var that = this;
			http.post('api/store/order/OrderInfo', {
				order_id: options.id
			}, res => {
				that.orderDetail = res.datas
			});
		},
		methods: {
			toCategory() {
				uni.switchTab({
					url: '/pages/store/category/category'
				});
			},
		}
	}
</script>
<style>
	@import url("../../../../common/css/order-goods.css");

	/* 取餐二维码 */
	.qrcode-view {
		margin-top: 20rpx;
		align-items: center;
		justify-content: center;
	}

	.qrcode-view text {
		color: #333;
		font-size: 30rpx;
	}

	.qrcode-view image {
		width: 350rpx;
		height: 350rpx;
	}

	.order-detail-header {
		position: relative;
		width: 100%;
		height: 148rpx;
	}

	.order-detail-header image {
		width: 100%;
		height: 100%;
	}

	.header-main {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		justify-content: center;
		color: #fff;
		margin: 0rpx 30rpx;
	}

	.header-main text:nth-child(1) {
		font-size: 30rpx;
	}

	.header-main text:nth-child(2) {
		font-size: 28rpx;
	}

	.goods-list .title {
		font-size: 32rpx;
	}

	.goods-list {
		margin: 0;
	}

	.total-view {
		margin-top: 10rpx;
	}

	.total-view .title {
		color: #333333;
		font-size: 32rpx;
	}

	.gray {
		color: #333;
	}

	.bottom {
		background: #fff;
		align-items: center;
		border-top: 1rpx solid #F6F4F4;
	}

	.bottom .confirm {
		margin-right: 34rpx;
		background: #FF9D11;
		color: #fff;
		font-size: 30rpx;
		align-items: center;
		justify-content: center;
		width: 152rpx;
		height: 56rpx;
		border-radius: 10rpx;
	}
</style>
